"use client";
import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
import { useRouter } from "@/i18n";
import { useGlobalStore } from "@/stores";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { FC, useEffect, useState } from "react";
import ItemCom from "./component/ItemCom";
import MaskCom from "./component/MaskCom";
import ModalCom from "./component/ModalCom";
import "./page.scss";

interface Props {}

const Profile: FC<Props> = () => {
    const t = useTranslations("ProfilePage");

    const { token, userInfo, setUserInfo } = useGlobalStore();
    const userInfoRequest = async () => {
        getUserInfoApi().then((res) => {
            res.code == 200 && setUserInfo(res.data);
        });
    };

    let [money, setMoney] = useState({
        deposit: 0,
        point: 0,
    });
    const userMoneyRequest = async () => {
        getUserMoneyApi().then((res) => {
            res.code == 200 &&
                setMoney({
                    deposit: res.data?.deposit || 0.0,
                    point: res.data?.point || 0.0
                });
        });
    };
    useEffect(() => {
        if (token) {
            userInfoRequest();
            userMoneyRequest();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [token]);

    const router = useRouter();
    const goPage = (path = "/") => {
        router.push(path);
    };

    const [visible, setVisible] = useState(false);
    const callbackFun = () => {
        setVisible(!visible);
    };

    const divClassName = clsx("bgImg", token && "default");
    const divClassName2 = clsx("userContent", token && "active");
    const divClassName3 = clsx("userInfo", token && "active");
    return (
        <div className="profile-box">
            <div className={divClassName2}>
                <div className={divClassName3}>
                    <div>
                        <div className={divClassName}></div>
                        {token && (
                            <div>
                                <span>{t("Conta")}</span>
                                <span className="phone">{userInfo?.user_phone || ""}</span>
                            </div>
                        )}
                    </div>
                    {
                        token ?
                        (
                            <div className="goto" onClick={() => goPage(`/confirmPassword?userPhone=${userInfo.user_phone}&code=123456&alter=true`)}>
                                <span className="iconfont icon-xiangzuo1"></span>
                            </div>
                        ) : (
                            <div className="goto" onClick={() => goPage("/login")}>
                                <span>{t("Login")}</span>
                                <span className="iconfont icon-xiangzuo1"></span>
                            </div>
                        )
                    }
                </div>
                {token && (
                    <div className="coin">
                        <div>
                            <span className="iconfont icon-icon-wallet"></span>
                            <div>
                                <span>{t("Saldo")}</span>
                                <div className="num">
                                    <span className="uppercase">brl </span>
                                    <span>{money.deposit || 0.0}</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span className="iconfont icon-gift2"></span>
                            <div>
                                <span onClick={() => setVisible(true)}>
                                    {t("Bônus")} <img className="a" src="/img/a.png" alt="" />
                                </span>
                                <div className="num">
                                    <span className="uppercase">brl </span>
                                    <span>{money.point || 0.0}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            <div className="link">
                <span onClick={() => goPage("/deposit")}>{t("Depósito")}</span>
                <span onClick={() => goPage(token ? "/withdraw" : `/login?redirect=/withdraw`)}>
                    {t("Sacar")}
                </span>
            </div>
            <ItemCom />
            <ModalCom />
            <MaskCom visible={visible} callbackFun={callbackFun} />
        </div>
    );
};

export default Profile;